<template>
	<view>
		<u-tabbar v-if="utype==106||utype==5||utype==6 || utype === undefined || utype === ''" :value="value1"
			@change="change">
			<u-tabbar-item text="首页" :icon="tabbars[0].icon"></u-tabbar-item>
			<u-tabbar-item text="电站" :icon="tabbars[1].icon"></u-tabbar-item>
			<u-tabbar-item text="">
				<template #inactive-icon>
					<view class="tabbarsys">
						<view class="text iconfont icon-saoyisao">
						</view>
					</view>
				</template>
			</u-tabbar-item>
			<u-tabbar-item text="订单" :icon="tabbars[3].icon"></u-tabbar-item>
			<u-tabbar-item text="我的" :icon="tabbars[4].icon"></u-tabbar-item>
		</u-tabbar>
		<u-tabbar v-if="utype===0||utype==='0'" :value="value1" @change="change">
			<u-tabbar-item :text="item.label" v-for="(item,key) in tabbars" :key="key">
				<template #inactive-icon>
					<view :class="[item.icon]"></view>
				</template>
				<template #active-icon>
					<view :class="[item.icon]"></view>
				</template>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import tabbar1 from "@/static/tabbar1.png"
	import tabbar2 from "@/static/tabbar2.png"
	import tabbar3 from "@/static/tabbar3.png"
	import tabbar4 from "@/static/tabbar4.png"
	import tabbar1a from "@/static/tabbar1_a.png"
	import tabbar2a from "@/static/tabbar2_a.png"
	import tabbar3a from "@/static/tabbar3_a.png"
	import tabbar4a from "@/static/tabbar4_a.png"
	export default {
		name: "ztabbar",
		data() {
			return {
				value1: "",
				utype: uni.getStorageSync('utype'),
				// #ifndef APP
				utype: window.location.origin.indexOf("localhost") >= 0 ? 5 : uni.getStorageSync('utype'),
				// #endif
				actives: [
					tabbar1a, tabbar2a, "", tabbar3a, tabbar4a
				]
			};
		},
		computed: {
			// actives() {
			// 	const type = this.$store.state.user.USearch.utype || ''
			// 	if (type == 106) {
			// 		return
			// 	}
			// },
			tabbars() {
				let type = uni.getStorageSync('utype') || ''
				// #ifndef APP
				if (window.location.origin.indexOf("localhost") >= 0) {
					type = 5
				}
				// #endif
				// 普通用户
				if (type == 106 || type == 5 || type == 6 || type === undefined || type === '') {
					let r = [{
							icon: tabbar1,
							url: "/pages/index1/index1"
						},
						{
							icon: tabbar2,
							url: (type == 5 || type == 6) ? "/pages/map/map" : "/pages/map/mapgoogle"
						},
						{
							icon: "",
						},
						{
							icon: tabbar3,
							url: "/pages/order/order"
						},
						{
							icon: tabbar4,
							url: "/pages/home1/home1"
						}
					]
					if (r[this.value1]) {
						r[this.value1].icon = this.actives[this.value1]
					}
					return r
				}
				// 管理员
				if (type === 0 || type === '0') {
					let r = [{
						icon: "iconfont iconicon-chongdianzhuang",
						url: "/pages/index2/index2",
						label: "首页"
					}, {
						icon: "iconfont iconquyu",
						url: "/pages/Station/Station",
						label: "站点"
					}, {
						icon: "iconfont icontixian ",
						url: "/pages/revenue/revenue",
						label: "收入"
					}, {
						icon: "iconfont iconicon-gerenzhongxin-xuanzhong ",
						url: "/pages/home2/home2",
						label: "个人中心"
					}]
					if (r[this.value1]) {
						r[this.value1].icon = r[this.value1].icon + " active"
					}

					return r
				}

			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				let curPage = getCurrentPages();
				let route = curPage[curPage.length - 1].route; //获取当前页面的路
				// if (this.tabbars == undefined) return
				let i = this.tabbars.findIndex(e => {
					return e.url && e.url.includes(route)
				})
				this.value1 = i
			},
			change(v) {
				if (this.utype == 0) {

				} else {
					if (v == 2) {
						this.$z.sys()
						return
					}
				}

				// this.value1 = v
				uni.reLaunch({
					url: this.tabbars[v].url
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-tabbar-item__icon {
		.iconfont {
			width: 48rpx;
			height: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 48rpx;
			position: relative;
			top: -4rpx;
			color: rgb(125, 126, 128);

			&.active {
				color: $uni-color-primary;
			}
		}
	}

	.z-tabbar__content__circle__borde {
		width: 100rpx;
		height: 100rpx;
		border: 1px solid #dadbde;
		position: absolute;
		top: -50%;
		left: 50%;
		z-index: -10;
		transform: translateX(-50%);
		border-radius: 50%;
		background: #fff;
	}

	.tabbarsys {
		width: 140rpx;
		height: 140rpx;
		border: 1px solid #dadbde;
		position: absolute;
		top: -100rpx;
		border-radius: 50%;
		background-color: #fff;

		.text {
			width: 100rpx;
			height: 100rpx;
			background-color: $u-primary;
			border-radius: 50%;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 40rpx;
		}

		// left: 50%;
		&::before {
			content: "";
			width: 144rpx;
			height: 140rpx;
			background-color: #fff;
			position: absolute;
			left: -2rpx;
			bottom: 0;
			// z-index: -1;
			top: 50rpx
		}
	}
</style>